<script setup>
/*定义一个子传父，传一个close，
在子页面点击关闭按钮的时候穿给父界面一个close方法，父组件监听到这个
close后就执行close方法，关闭弹窗。*/
const pageClose = () => {
  emits('close');
};
const emits = defineEmits(['close']);

</script>

<template>
    <div class="main" >
        <div class="title">
            <div class="titlename">
                <slot name="titlename">
                </slot>
            </div>
            <div class="closename" @click="pageClose"  >
            <img
              src="@/assets/images/close_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            </div>
        </div>
        <div class="line"></div>
        <div class="main-content">
            <slot name="main-content">
            </slot>
        </div>
        <div class="line"></div>
        <div class="button">
            <slot name="button">
            </slot>
        </div> 
    </div>
    
</template>

<style lang="scss"  scoped>
.main {
    background: #FFFFFF;
    box-shadow: -2px 4px 8px 0px rgba(0,0,0,0.2);
    border-radius: 0px 0px 0px 0px;
    .title{
    width: 100%;
    height:44px ;
    padding: 12px 12px 12px 12px ;
    display: flex;
    background: #FFFFFF; 
    .titlename{      
        
        width:calc(100% / 2);
        
    }
    .closename{      
        width:calc(100% / 2);
        text-align: right;
        cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
    }
}
    .line{
        width: 100%;
        height:1px ;
        background-color:#EBEBEB;
    }
    .main-content{
        width: 100%;
        height: calc(100% - 44px - 66px);
        background-color: red ;
        padding: 12px;
         
    }
    .button{
        width: 100%;
        height:64px ;
        background: #FFFFFF;
        padding: 12px;
        text-align: right;
    }
}

</style>